Multi-select dropdown templates

This page demonstrates how to build the UI for different multi-select dropdowns styles.

Note that the logic to bind the contents to user's selection is not included in these examples.

Also, note that this example code is using the optional Tailwind utilities classes provided by Quartz.

Simple multi-select with search field

<qds-button id="simpleMultiSelect" text="Select" action="dropdown" />
<qds-dropdown target="#simpleMultiSelect">
  <div style="padding: var(--qds-list-item-standard-padding-horizontal)">
    <qds-input type="search" placeholder="Filter" />
  </div>
  <div class="flex flex-col">
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="Select all"
      indeterminate
    />
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="This is option 1"
      selected
    />
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="This is option 2"
    />
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="This is option 3"
      selected
    />
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="This is option 4"
    />
  </div>
</qds-dropdown>

With dynamic label and selection counter

<qds-button
  id="dynamicLabelMultiSelect"
  text="Red, Green"
  action="dropdown"
  badge="2"
/>
<qds-dropdown target="#dynamicLabelMultiSelect">
  <div
    class="qds-controls qds-related items-end flex-col"
    style="padding: var(--qds-list-item-standard-padding-horizontal)"
  >
    <qds-input type="search" placeholder="Filter" />
    <qds-button importance="subdued" text="Clear selection" />
  </div>
  <div>
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="Select all"
      indeterminate
    />
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="Red"
      selected
    />
    <qds-list-item list-action="multiselect" divider="hide" text="Blue" />
    <qds-list-item
      list-action="multiselect"
      divider="hide"
      text="Green"
      selected
    />
    <qds-list-item list-action="multiselect" divider="hide" text="Yellow" />
  </div>
</qds-dropdown>

Multiple selections reflected in chips

<div class="flex flex-row qds-unrelated">
  <div class="qds-controls qds-related flex-auto items-stretch flex flex-col">
    <qds-label text="Color:" />
    <qds-button text="Select" action="dropdown" id="colorMultiSelect" />
    <qds-dropdown target="#colorMultiSelect">
      <div
        class="qds-controls qds-related items-stretch"
        style="padding: var(--qds-list-item-standard-padding-horizontal)"
      >
        <qds-input type="search" placeholder="Filter" />
      </div>
      <div>
        <qds-list-item
          list-action="multiselect"
          divider="hide"
          text="Select all"
        />
        <qds-list-item
          list-action="multiselect"
          divider="hide"
          text="Red"
          selected
        />
        <qds-list-item
          list-action="multiselect"
          divider="hide"
          text="Green"
          selected
        />
        <qds-list-item list-action="multiselect" divider="hide" text="Blue" />
        <qds-list-item list-action="multiselect" divider="hide" text="Yellow" />
      </div>
    </qds-dropdown>
  </div>
  <div class="qds-controls qds-related flex-auto items-stretch flex flex-col">
    <qds-label text="Size:" />
    <qds-button text="Select" action="dropdown" id="sizeSingleSelect" />
    <qds-dropdown target="#sizeSingleSelect">
      <div
        class="qds-controls qds-related"
        style="padding: var(--qds-list-item-standard-padding-horizontal)"
      >
        <qds-input type="search" placeholder="Filter" />
      </div>
      <div>
        <qds-list-item divider="hide" text="XSmall" />
        <qds-list-item divider="hide" text="Small" />
        <qds-list-item divider="hide" text="Medium" selected />
        <qds-list-item divider="hide" text="Large" />
        <qds-list-item divider="hide" text="XLarge" />
      </div>
    </qds-dropdown>
  </div>
  <div class="qds-controls qds-related flex-auto items-stretch flex flex-col">
    <qds-label text="Series:" />
    <qds-button text="Select" action="dropdown" id="seriesMultiSelect" />
    <qds-dropdown target="#seriesMultiSelect">
      <div
        class="qds-controls qds-related"
        style="padding: var(--qds-list-item-standard-padding-horizontal)"
      >
        <qds-input type="search" placeholder="Filter" />
      </div>
      <div>
        <qds-list-item
          list-action="multiselect"
          divider="hide"
          text="Select all"
          indeterminate
        />
        <qds-list-item
          list-action="multiselect"
          divider="hide"
          text="Easergy"
          selected
        />
        <qds-list-item list-action="multiselect" divider="hide" text="ION" />
        <qds-list-item
          list-action="multiselect"
          divider="hide"
          text="PowerLogic"
          selected
        />
      </div>
    </qds-dropdown>
  </div>
</div>

<div class="qds-controls qds-related flex-row flex-wrap items-center">
  <qds-label inline text="Filters:" />
  <qds-chip size="small" type="closable" text="Color: Red" />
  <qds-chip size="small" type="closable" text="Color: Green" />
  <qds-chip size="small" type="closable" text="Size: Medium" />
  <qds-chip size="small" type="closable" text="Series: Easergy" />
  <qds-chip size="small" type="closable" text="Series: PowerLogic" />
</div>